<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>即时订单 - 胎大王</title>
	{include file='common/head' /}
	<link href="/css/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
	<script src="/js/layer/layer.js"></script>
</head>
<body>
<div class="container">
{include file='common/top' /}
	<div class="deposit">
		<div class="deposit-banner"></div>
		<div class="contai">
			<div class="f-bk30"></div>
			<div class="f-bk30"></div>
			<div class="deposit-content">
				<div class="deposit-title">
					<strong>TDW产品列表</strong>
					<div class="more">TDW PRODUCT LIST</div>
				</div>
				<div class="f-bk3"></div>
				<div class="con-list">
				{volist id="vo" name="data['productArray']"}
				<div class="deposit-list">
					<div class="pure-g">
						<div class="pure-u-6-24">
							<a href="/goods/integralDetail.html?id={$vo.id}"><img src="{$vo.img}" alt="{$vo.name}"></a>
						</div>
						<div class="pure-u-18-24" style="position: relative;">
							<div class="info">
								<a href="/goods/integralDetail.html?id={$vo.id}"><p>{$vo.name}</p></a>
							</div>
							<div class="price">
								{$vo.point}<span style="color:#333;font-size:16px;font-weight:400">&nbsp;积分</span>
							</div>
							<div class="type-list">
								<ul>
									<li>·规格：{$vo.spec}</li>
									<li>·花纹：{$vo.huawen}</li>
									<li>·轮位：{$vo.position}</li>
								</ul>
							</div>
							<div class="type">
								<div><span class="span_tit">库存：</span><span> &nbsp;</span></div>
							</div>
							<div class="deposit-botton">
								<ul>
									<li><div class="num">· 兑换数量 <span class="reduc">&nbsp;-&nbsp;</span><input name="numinput" class="numinput" type="text" id="text_box" value="1" /><span class="add">+</div></li>

									<li>
									<input type="hidden" value="{$vo.id}" name="productId"/>
									<input type="hidden" value="{$vo.name}" name="productName"/>
									<div class="umall">
									<button data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" class="buy">立即兑换</button>
									</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				{/volist}
				</div>				
		</div>
	</div>
	{include file='common/foot' /}
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document" style="width:800px;">
    <div class="modal-content">
      <div class="btn-info modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">请填写收货信息</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="recipient-name" class="control-label">&emsp;联系人:</label>
            <input type="text" class="form-control well" id="modal-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">联系电话:</label>
            <input type="text" class="form-control well" id="modal-phone">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">配送地区:</label>
			<select class="form-control well" style="width:20%;" id="cmbProvince">
			  <option value="">请选择</option>
			</select>
			<select class="form-control well" style="width:20%;display:none;" id="cmbCity">
			</select>
			<select class="form-control well" style="width:20%;display:none;" id="cmbArea">
			</select>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">详细地址:</label>
            <input type="text" class="form-control well" id="modal-address">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">兑换数量:</label>
            <span class="numDown" >&nbsp;-&nbsp;</span>
			<input type="text" class="form-control well" style="width:40px;" id="modal-quantity" value="1" />
			<span class="numUp">&nbsp;+&nbsp;</span>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">兑换产品:</label>
            <input type="text" class="form-control well" id="product-msg" value="" disabled />
          </div>
		  <input type="hidden" name="areaId"  id="areaId" value="" />
		  <input type="hidden" name="productId"  id="productId" value="" />
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary modal-submit">确定</button>
      </div>
    </div>
  </div>
</div>
</div>
{include file='common/back' /}
<script>
$(function(){
	$(".reduc").each(function() {
		$(this).click(function() {
			var $multi1 = 0;
			var vall1 = $(this).next().val();
			vall1--;
			if(vall1 <= 0) {
				vall1 = 1;
			}
			$(this).next().val(vall1);

		})
	});
	$(".add").each(function() {
		$(this).click(function() {
			var $multi = 0;
			var vall = parseInt($(this).prev().val());
			vall++;
			$(this).prev().val(vall);
		})

	});
	$(".numDown").each(function() {
		$(this).click(function() {
			var $multi1 = 0;
			var vall1 = $(this).next().val();
			vall1--;
			if(vall1 <= 0) {
				vall1 = 1;
			}
			$(this).next().val(vall1);

		});
	});
	$(".numUp").each(function() {
		$(this).click(function() {
			var $multi = 0;
			var vall = parseInt($(this).prev().val());
			vall++;
			$(this).prev().val(vall);
		});
	});
	$('.buy').click(function(){
		var quantity = $(this).closest("ul").find("input[name='numinput']").val();
		var productId = $(this).parents("li").find("input[name='productId']").val();
		var productName = $(this).parents("li").find("input[name='productName']").val();
		$("#modal-quantity").val(quantity);
		$("#productId").val(productId);
		$("#product-msg").val(productName);
	});
	$('.modal-submit').click(function(){
		$(".modal-submit").attr({"disabled":"disabled"});
		var name = $("#modal-name").val();
		if (name == ''||name==undefined||name==null) {
			layer.msg('请填写联系人',{time:1500});
			$(".modal-submit").removeAttr("disabled"); 
			return false;  
		}
		var mobile = $("#modal-phone").val();
		if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(mobile))) {
			layer.msg('联系电话有误',{time:1500});
			$(".modal-submit").removeAttr("disabled");   
			return false;  
		}
		var areaId = $("#areaId").val();
		if (areaId == ''||areaId==undefined||areaId==null) {
			layer.msg('请选择配送地区',{time:1500});
			$(".modal-submit").removeAttr("disabled");   
			return false;  
		}	  
		var address = $("#modal-address").val();
		if (address == ''||address==undefined||address==null) {
			layer.msg('请填写详细地址',{time:1500});
			$(".modal-submit").removeAttr("disabled");   
			return false;  
		}
		var quantity = $("#modal-quantity").val();
		if (!(/^\d*[1-9]\d*$/.test(quantity)) || parseInt(quantity) <= 0) {
			layer.msg('兑换数量有误',{time:1500});
			$(".modal-submit").removeAttr("disabled");   
			return false; 			
		}
		var productId = $("#productId").val();
		if (productId == ''||productId==undefined||productId==null) {
			layer.msg('提交失败，刷新页面后请重新选择商品',{time:2500});
			$(".modal-submit").removeAttr("disabled");   
			return false;  
		}		
		var productMsg = $("#product-msg").val();
		layer.confirm("您确定要兑换数量为"+quantity+"的"+productMsg+"产品吗？",{btn:['确认','取消']},function(btn){
			$.ajax({
				url: "/Order/integralPost.html",
				type: "POST",
				data: {productId:productId,name:name,mobile:mobile,areaId:areaId,address:address,quantity:quantity},
				dataType: "json",
				cache: false,
				success: function(data) {
					if(data.code==1){
						layer.msg("兑换成功",{time:1500});
						$('#exampleModal').modal('hide');					
					}else{
						layer.msg(data.msg,{time:1500});
						$(".modal-submit").removeAttr("disabled"); 
					}
				}
			});			
		});
	});
	var html='';
	$.ajax({
		url: "/Area/province.html",
		type: "POST",
		data: {},
		dataType: "json",
		cache: false,
		success: function(data) {
			if(data.code==1&&data.data.provinceAarray.length!=0){
				var province = data.data.provinceAarray;
				for(var i=0;i<data.data.provinceAarray.length;i++){
					html+='<option value="'+province[i].id+'">'+province[i].name+'</option>';
				}
				$("#cmbProvince").append(html); 					
			}else{
				layer.msg("省份获取失败，请重试",{time:1500});
			}

		}
	});
	
	$("#cmbProvince").change(function(){
		var id=$(this).children('option:selected').val();
		var cityhtml="<option value=''>请选择</option>";
		var countyhtml="";
		if(id==''||id==undefined||id==null){
			$("#cmbCity").hide();
			$("#cmbArea").hide();
			return false;
		}
		$.ajax({
			url: "/Area/city.html",
			type: "POST",
			data: {id:id},
			dataType: "json",
			cache: false,
			success: function(data) {
				if(data.code==1&&data.data.cityArray.length!=0){
					var cityArray = data.data.cityArray;
					for(var i=0;i<data.data.cityArray.length;i++){
						cityhtml+='<option value="'+cityArray[i].id+'">'+cityArray[i].name+'</option>';
					}
					$("#areaId").val("");
					$("#cmbCity").show();
					$("#cmbArea").hide();
					$("#cmbCity").html(cityhtml); 					
					$("#cmbArea").html(countyhtml); 					
				}else{
					layer.msg("城市获取失败，请重试",{time:1500});
				}
			}
		});	
	});	
	$("#cmbCity").change(function(){
		var id=$(this).children('option:selected').val();
		var countyhtml="<option value=''>请选择</option>";
		$.ajax({
			url: "/Area/county.html",
			type: "POST",
			data: {id:id},
			dataType: "json",
			cache: false,
			success: function(data) {
				if(data.code==1&&data.data.countyArray.length!=0){
					var countyArray = data.data.countyArray;
					for(var i=0;i<data.data.countyArray.length;i++){
						countyhtml+='<option value="'+countyArray[i].id+'">'+countyArray[i].name+'</option>';
					}
					$("#areaId").val("");
					$("#cmbArea").show();
					$("#cmbArea").html(countyhtml); 					
				}else if(data.data.countyArray.length==0){
					$("#cmbArea").html(countyhtml);
					$("#areaId").val(id);
				}else{
					
				}
			}
		});	
	});
	$("#cmbArea").change(function(){
		var id=$(this).children('option:selected').val();
		$("#areaId").val(id);
	});  
});
</script>
</body>
</html>